<template>
  <div class="container">
    <div
      class="order_item"
      v-if="orderData.length > 0"
      v-for="order in orderData"
      :key="order.id"
    >
      <div class="header">
        <p class="create_time">订单时间：{{ order.created_at }}</p>
        <p class="status">{{ getStatus(order.status) }}</p>
      </div>
      <van-card
        v-for="goods in order.order_goods_infos"
        :num="goods.count"
        :price="((goods.goods_info.price || 0) / 100).toFixed(2)"
        :desc="goods.goods_info.detail_info"
        :title="goods.goods_info.name"
        :thumb="goods.goods_info.pic_url"
      />
      <div class="footer">
        <div v-show="order.pay_type == 1">
          支付方式：{{ getPayType(order.pay_type) }}
        </div>
        <div>总金额：￥{{ (order.price / 100).toFixed(2) }}</div>
      </div>
    </div>
    <!-- 订单数据没有展示的空状态 -->
    <div v-else>
      <van-empty description="当前没订单"/>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, defineProps } from "vue";
import { orderList } from "@/api/order";

//要遍历的订单数据
let orderData = ref([]);

let props = defineProps({
  status: Number,
});

let getStatus = (status) => {
  switch (status) {
    case 1:
      return "待支付";
    case 2:
      return "待发货";
    case 3:
      return "待收货";
    case 4:
      return "待评价";
  }
};

let getPayType = (type) => {
  switch (type) {
    case 1:
      return "微信";
    case 2:
      return "支付宝";
    case 3:
      return "云闪付";
  }
};

onMounted(async () => {
  //获取订单列表数据
  let res = await orderList({ page: 1, limit: 10, status: props.status });
  orderData.value = res.list || [];
});
</script>

<style scoped lang="less">
.container {
  --van-card-background: #f0f0f0;
  .order_item {
    padding: 10px;
    margin: 10px;
    background: #fff;
    border-radius: 12px;
    .header {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      .create_time {
        color: #2f3640;
      }
      .status {
        color: #353b48;
      }
    }
    .goods_item {
      margin: 5px 0;
      background: #f0f0f0;
      border-radius: 10px;
    }
    .footer {
      font-size: 10px;
      color: #2f3640;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 2px;
    }
  }
}
.bottom-button {
    width: 160px;
    height: 40px;
  }
</style>